<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页组件 - Pagination Component</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            border-bottom: 2px solid #1677FF;
            padding-bottom: 10px;
        }
        
        h2 {
            color: #666;
            margin-top: 30px;
        }
        
        .demo-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            background: #fafafa;
        }
        
        .code-block {
            background: #f6f8fa;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            padding: 16px;
            margin: 10px 0;
            overflow-x: auto;
        }
        
        .code-block pre {
            margin: 0;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 14px;
            line-height: 1.5;
        }
        
        /* 分页组件样式 - 来自业务员办理叫号页面 */
        .pager {
            text-align: center;
            padding-top: 32px;
            font-size: 0;
        }
        
        .pager span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            padding: 0 12px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.88);
            margin: 0 4px;
            cursor: pointer;
        }
        
        .pager span.pager_btn {
             background: rgba(0, 0, 0, 0.06);
             border-radius: 6px;
             transition: all 0.2s;
         }
         
         .pager span.pager_btn:hover {
             background: rgba(22, 119, 255, 0.1);
             color: #1677FF;
         }
         
         .pager span.pager_btn:not([style*="opacity"]):not([style*="background: #1677FF"]):hover {
             background: rgba(22, 119, 255, 0.1);
             color: #1677FF;
         }
        
        .pager span.pager_input {
            padding: 0 5px;
        }
        
        .pager span.pager_input input {
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #D9D9D9;
            outline: none;
            height: 32px;
            width: 45px;
            text-align: center;
        }
        
        .control-panel {
            background: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .control-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
        }
        
        .control-group label {
            min-width: 80px;
            font-weight: 500;
        }
        
        .control-group input {
            padding: 6px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .control-group button {
            padding: 6px 16px;
            background: #1677FF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .control-group button:hover {
            background: #0958d9;
        }
        
        .api-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .api-table th,
        .api-table td {
            border: 1px solid #e8e8e8;
            padding: 12px;
            text-align: left;
        }
        
        .api-table th {
            background: #fafafa;
            font-weight: 600;
        }
        
        .api-table code {
            background: #f6f8fa;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>分页组件 (Pagination Component)</h1>
        
        <h2>📖 组件说明</h2>
        <p>这是一个轻量级的分页组件，支持页码显示、页面跳转、输入框快速跳转等功能。组件基于原生JavaScript实现，无需依赖任何第三方库。</p>
        
        <div class="demo-section">
            <h3>📦 分页库文件</h3>
            <p>分页组件已提取为独立的JS库文件：<code>resources/js/pagination.js</code></p>
            <ul>
                <li>✅ 支持多页面复用</li>
                <li>✅ 提供全局API接口</li>
                <li>✅ 支持事件监听机制</li>
                <li>✅ 支持多个分页组件同时使用</li>
                <li>✅ 完整的类型安全和错误处理</li>
            </ul>
        </div>
        
        <h2>🎯 主要特性</h2>
        <ul>
            <li>支持大数据量分页显示</li>
            <li>智能页码省略显示（...）</li>
            <li>支持键盘输入快速跳转</li>
            <li>响应式设计，适配移动端</li>
            <li>可自定义样式和回调函数</li>
            <li>与后端数据完美对接</li>
        </ul>
        
        <h2>🚀 在线演示</h2>
        <div class="demo-section">
            <h3>基础分页演示</h3>
            <div class="control-panel">
                <div class="control-group">
                    <label>当前页:</label>
                    <input type="number" id="currentPage" value="1" min="1">
                    <label>总页数:</label>
                    <input type="number" id="totalPages" value="10" min="1">
                    <button onclick="updateDemo()">更新分页</button>
                </div>
            </div>
            
            <!-- 分页组件容器 -->
            <div class="pager" id="demo-pager">
                <!-- 分页内容将通过JavaScript动态生成 -->
            </div>
        </div>
        
        <h2>💻 使用方法</h2>
        
        <h3>1. 引入分页库</h3>
        <div class="code-block">
            <pre>&lt;!-- 引入分页组件JS库 --&gt;
&lt;script src="../resources/js/pagination.js"&gt;&lt;/script&gt;

&lt;!-- 或者使用相对路径 --&gt;
&lt;script src="./resources/js/pagination.js"&gt;&lt;/script&gt;</pre>
        </div>
        
        <h3>2. 引入分页样式</h3>
        <div class="code-block">
            <pre>&lt;!-- 在CSS文件中添加分页样式，或直接在页面中添加 --&gt;
&lt;style&gt;
.pager {
    text-align: center;
    padding-top: 32px;
    font-size: 0;
}

.pager span {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin: 0 4px;
    cursor: pointer;
}

.pager span.pager_btn {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    transition: all 0.2s;
}

.pager span.pager_btn:hover {
    background: rgba(22, 119, 255, 0.1);
    color: #1677FF;
}

.pager span.pager_input {
    padding: 0 5px;
}

.pager span.pager_input input {
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #D9D9D9;
    outline: none;
    height: 32px;
    width: 45px;
    text-align: center;
}
&lt;/style&gt;</pre>
        </div>
        
        <h3>3. HTML 结构</h3>
        <div class="code-block">
            <pre>&lt;!-- 分页容器 --&gt;
&lt;div class="pager" id="pager"&gt;
    &lt;!-- 分页内容将通过JavaScript动态生成 --&gt;
&lt;/div&gt;</pre>
        </div>
        
        <h3>4. JavaScript 调用</h3>
        <div class="code-block">
            <pre>// 基础调用
renderPagination(1, 10);

// 指定容器ID
renderPagination(1, 10, 'my-pager');

// 使用全局API
window.PaginationAPI.renderPagination(1, 10);

// 结合后端数据
var backendData = {
    pageNo: 2,        // 当前页码
    pageSize: 10,     // 每页条数
    pageTotal: 15,    // 总页数
    total: 150,       // 总记录数
    totalPage: 15     // 总页数（与pageTotal相同）
};
renderPagination(backendData.pageNo, backendData.pageTotal);</pre>
        </div>
        
        <h3>5. 监听页面变化事件</h3>
        <div class="code-block">
            <pre>// 监听页面变化事件
document.addEventListener('pageChange', function(event) {
    var currentPage = event.detail.currentPage;
    var totalPages = event.detail.totalPages;
    
    console.log('页面变化:', currentPage, '/', totalPages);
    
    // 调用后端API获取数据
    loadPageData(currentPage);
});

// 加载页面数据的函数
function loadPageData(page) {
    fetch('/api/data?page=' + page + '&size=10')
        .then(response => response.json())
        .then(data => {
            // 更新页面数据
            updateTableData(data.list);
            // 分页组件会自动更新，无需手动调用
        })
        .catch(error => {
            console.error('获取数据失败:', error);
        });
}</pre>
        </div>
        
        <h3>6. 自定义页面跳转处理（可选）</h3>
        <div class="code-block">
            <pre>// 如果需要自定义跳转逻辑，可以重写goToPage函数
// 注意：重写后会覆盖默认的事件触发机制
function goToPage(page) {
    console.log('自定义跳转到第' + page + '页');
    
    // 自定义逻辑
    // ...
    
    // 手动调用渲染
    renderPagination(page, getTotalPages());
}</pre>
        </div>
        
        <h2>📋 API 文档</h2>
        
        <h3>核心函数</h3>
        
        <h4>renderPagination(pageNo, pageTotal, containerId)</h4>
        <table class="api-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>类型</th>
                    <th>必填</th>
                    <th>默认值</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>pageNo</code></td>
                    <td>Number</td>
                    <td>否</td>
                    <td>1</td>
                    <td>当前页码</td>
                </tr>
                <tr>
                    <td><code>pageTotal</code></td>
                    <td>Number</td>
                    <td>否</td>
                    <td>1</td>
                    <td>总页数</td>
                </tr>
                <tr>
                    <td><code>containerId</code></td>
                    <td>String</td>
                    <td>否</td>
                    <td>'pager'</td>
                    <td>分页容器的ID</td>
                </tr>
            </tbody>
        </table>
        
        <h3>全局API (window.PaginationAPI)</h3>
        <table class="api-table">
            <thead>
                <tr>
                    <th>方法名</th>
                    <th>参数</th>
                    <th>返回值</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>renderPagination(pageNo, pageTotal, containerId)</code></td>
                    <td>同上</td>
                    <td>void</td>
                    <td>渲染分页组件</td>
                </tr>
                <tr>
                    <td><code>goToPage(page)</code></td>
                    <td>page: Number</td>
                    <td>void</td>
                    <td>跳转到指定页面，会触发pageChange事件</td>
                </tr>
                <tr>
                    <td><code>handlePageJump(event, totalPages)</code></td>
                    <td>event: Event, totalPages: Number</td>
                    <td>void</td>
                    <td>处理输入框跳转，支持Enter键确认</td>
                </tr>
                <tr>
                    <td><code>getCurrentPageNo()</code></td>
                    <td>无</td>
                    <td>Number</td>
                    <td>获取当前页码</td>
                </tr>
                <tr>
                    <td><code>getTotalPages()</code></td>
                    <td>无</td>
                    <td>Number</td>
                    <td>获取总页数</td>
                </tr>
                <tr>
                    <td><code>setPaginationConfig(config)</code></td>
                    <td>config: Object</td>
                    <td>void</td>
                    <td>设置分页配置</td>
                </tr>
            </tbody>
        </table>
        
        <h3>事件</h3>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>触发时机</th>
                    <th>事件数据</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>pageChange</code></td>
                    <td>页面跳转时</td>
                    <td>{ currentPage: Number, totalPages: Number }</td>
                    <td>页面变化事件，可通过document.addEventListener监听</td>
                </tr>
            </tbody>
        </table>
        
        <h3>配置对象 (setPaginationConfig)</h3>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>currentPage</code></td>
                    <td>Number</td>
                    <td>当前页码</td>
                </tr>
                <tr>
                    <td><code>totalPages</code></td>
                    <td>Number</td>
                    <td>总页数</td>
                </tr>
                <tr>
                    <td><code>containerId</code></td>
                    <td>String</td>
                    <td>容器ID</td>
                </tr>
            </tbody>
        </table>
        
        <h2>🎨 样式自定义</h2>
        <p>组件使用CSS类名进行样式控制，可以通过覆盖以下类名来自定义外观：</p>
        <ul>
            <li><code>.pager</code> - 分页容器</li>
            <li><code>.pager span</code> - 分页元素基础样式</li>
            <li><code>.pager span.pager_btn</code> - 分页按钮</li>
            <li><code>.pager span.pager_input</code> - 输入框容器</li>
            <li><code>.pager span.pager_input input</code> - 输入框</li>
        </ul>
        
        <h2>🔧 完整示例</h2>
        
        <h3>基础示例</h3>
        <div class="code-block">
            <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;分页示例&lt;/title&gt;
    &lt;style&gt;
        /* 引入分页样式 */
        .pager {
            text-align: center;
            padding-top: 32px;
            font-size: 0;
        }
        .pager span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            padding: 0 12px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.88);
            margin: 0 4px;
            cursor: pointer;
        }
        .pager span.pager_btn {
            background: rgba(0, 0, 0, 0.06);
            border-radius: 6px;
            transition: all 0.2s;
        }
        .pager span.pager_btn:hover {
            background: rgba(22, 119, 255, 0.1);
            color: #1677FF;
        }
        .pager span.pager_input {
            padding: 0 5px;
        }
        .pager span.pager_input input {
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #D9D9D9;
            outline: none;
            height: 32px;
            width: 45px;
            text-align: center;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- 数据表格 --&gt;
    &lt;table id="dataTable"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;ID&lt;/th&gt;
                &lt;th&gt;姓名&lt;/th&gt;
                &lt;th&gt;邮箱&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id="tableBody"&gt;
            &lt;!-- 数据行将通过JavaScript动态生成 --&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    
    &lt;!-- 分页组件 --&gt;
    &lt;div class="pager" id="pager"&gt;&lt;/div&gt;
    
    &lt;!-- 引入分页库 --&gt;
    &lt;script src="../resources/js/pagination.js"&gt;&lt;/script&gt;
    
    &lt;script&gt;
        // 监听页面变化事件
        document.addEventListener('pageChange', function(event) {
            var currentPage = event.detail.currentPage;
            console.log('页面变化到:', currentPage);
            loadData(currentPage);
        });
        
        // 加载数据
        function loadData(page) {
            // 模拟API调用
            fetch('/api/users?page=' + page + '&size=10')
                .then(response => response.json())
                .then(data => {
                    updateTable(data.list);
                    // 分页组件会自动更新，无需手动调用renderPagination
                })
                .catch(error => {
                    console.error('加载数据失败:', error);
                    // 模拟数据用于演示
                    var mockData = generateMockData(page);
                    updateTable(mockData.list);
                });
        }
        
        // 更新表格数据
        function updateTable(dataList) {
            var tbody = document.getElementById('tableBody');
            var html = '';
            
            dataList.forEach(function(item) {
                html += '&lt;tr&gt;';
                html += '&lt;td&gt;' + item.id + '&lt;/td&gt;';
                html += '&lt;td&gt;' + item.name + '&lt;/td&gt;';
                html += '&lt;td&gt;' + item.email + '&lt;/td&gt;';
                html += '&lt;/tr&gt;';
            });
            
            tbody.innerHTML = html;
        }
        
        // 生成模拟数据
        function generateMockData(page) {
            var list = [];
            var startId = (page - 1) * 10 + 1;
            
            for (var i = 0; i &lt; 10; i++) {
                list.push({
                    id: startId + i,
                    name: '用户' + (startId + i),
                    email: 'user' + (startId + i) + '@example.com'
                });
            }
            
            return {
                list: list,
                pageNo: page,
                pageTotal: 15,
                total: 150
            };
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化分页组件
            renderPagination(1, 15);
            // 加载第一页数据
            loadData(1);
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
        </div>
        
        <h3>多个分页组件示例</h3>
        <div class="code-block">
            <pre>&lt;!-- 多个分页组件的使用 --&gt;
&lt;div class="section"&gt;
    &lt;h3&gt;用户列表&lt;/h3&gt;
    &lt;table id="userTable"&gt;&lt;/table&gt;
    &lt;div class="pager" id="user-pager"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="section"&gt;
    &lt;h3&gt;订单列表&lt;/h3&gt;
    &lt;table id="orderTable"&gt;&lt;/table&gt;
    &lt;div class="pager" id="order-pager"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    // 用户列表分页
    function loadUserData(page) {
        // 加载用户数据...
        renderPagination(page, 20, 'user-pager');
    }
    
    // 订单列表分页
    function loadOrderData(page) {
        // 加载订单数据...
        renderPagination(page, 30, 'order-pager');
    }
    
    // 监听页面变化事件
    document.addEventListener('pageChange', function(event) {
        var currentPage = event.detail.currentPage;
        var totalPages = event.detail.totalPages;
        
        // 根据当前活动的分页组件决定加载哪个数据
        var activeContainer = document.querySelector('.pager:focus-within') || 
                             document.querySelector('.pager');
        
        if (activeContainer && activeContainer.id === 'user-pager') {
            loadUserData(currentPage);
        } else if (activeContainer && activeContainer.id === 'order-pager') {
            loadOrderData(currentPage);
        }
    });
&lt;/script&gt;</pre>
        </div>
        
        <h3>使用全局API示例</h3>
        <div class="code-block">
            <pre>&lt;script&gt;
    // 使用全局API
    var api = window.PaginationAPI;
    
    // 渲染分页
    api.renderPagination(1, 10, 'my-pager');
    
    // 获取当前状态
    console.log('当前页:', api.getCurrentPageNo());
    console.log('总页数:', api.getTotalPages());
    
    // 设置配置
    api.setPaginationConfig({
        currentPage: 5,
        totalPages: 20,
        containerId: 'custom-pager'
    });
    
    // 程序化跳转
             api.goToPage(3);
         &lt;/script&gt;</pre>
        </div>
        
        <h2>🚀 快速开始</h2>
        <div class="demo-section">
            <h3>三步快速集成</h3>
            <ol>
                <li><strong>引入JS库：</strong><code>&lt;script src="../resources/js/pagination.js"&gt;&lt;/script&gt;</code></li>
                <li><strong>添加容器：</strong><code>&lt;div class="pager" id="pager"&gt;&lt;/div&gt;</code></li>
                <li><strong>调用渲染：</strong><code>renderPagination(1, 10);</code></li>
            </ol>
            
            <h3>推荐使用方式</h3>
            <div class="code-block">
                <pre>// 1. 监听页面变化事件（推荐）
document.addEventListener('pageChange', function(event) {
    var page = event.detail.currentPage;
    loadYourData(page); // 调用你的数据加载函数
});

// 2. 初始化分页
renderPagination(1, totalPages);

// 3. 无需手动处理跳转，组件会自动触发pageChange事件</pre>
            </div>
            
            <p><strong>💡 提示：</strong>使用事件监听方式可以让你的代码更加解耦，分页组件会自动处理所有的跳转逻辑。</p>
        </div>
    </div>
    
    <script>
        // 分页组件全局配置
        var PaginationConfig = {
            currentPage: 1,
            totalPages: 1,
            containerId: 'demo-pager'
        };
        
        /**
         * 分页组件核心渲染函数
         * @param {number} pageNo - 当前页码
         * @param {number} pageTotal - 总页数
         * @param {string} containerId - 容器ID，可选，默认为demo-pager
         */
        function renderPagination(pageNo, pageTotal, containerId) {
            containerId = containerId || PaginationConfig.containerId;
            var pager = document.getElementById(containerId);
            if (!pager) return;
            
            // 如果没有传入参数，使用默认值
            if (typeof pageNo === 'undefined') pageNo = 1;
            if (typeof pageTotal === 'undefined') pageTotal = 1;
            
            // 更新全局配置
            PaginationConfig.currentPage = pageNo;
            PaginationConfig.totalPages = pageTotal;
            PaginationConfig.containerId = containerId;
            
            var html = '';
            
            // 上一页
            if (pageNo > 1) {
                html += '<span class="pager_btn" onclick="goToPage(' + (pageNo - 1) + ')">&lt;</span>';
            } else {
                html += '<span class="pager_btn" style="opacity: 0.5; cursor: not-allowed;">&lt;</span>';
            }
            
            // 页码显示逻辑
            var startPage = Math.max(1, pageNo - 2);
            var endPage = Math.min(pageTotal, pageNo + 2);
            
            // 显示第一页
            if (startPage > 1) {
                html += '<span class="pager_btn" onclick="goToPage(1)">1</span>';
                if (startPage > 2) {
                    html += '<span style="opacity: 0.5; cursor: not-allowed;">...</span>';
                }
            }
            
            // 显示中间页码
            for (var i = startPage; i <= endPage; i++) {
                if (i === pageNo) {
                    html += '<span class="pager_btn" style="background: #1677FF; color: white;">' + i + '</span>';
                } else {
                    html += '<span class="pager_btn" onclick="goToPage(' + i + ')">' + i + '</span>';
                }
            }
            
            // 显示最后一页
            if (endPage < pageTotal) {
                if (endPage < pageTotal - 1) {
                    html += '<span style="opacity: 0.5; cursor: not-allowed;">...</span>';
                }
                html += '<span class="pager_btn" onclick="goToPage(' + pageTotal + ')">' + pageTotal + '</span>';
            }
            
            // 下一页
            if (pageNo < pageTotal) {
                html += '<span class="pager_btn" onclick="goToPage(' + (pageNo + 1) + ')">&gt;</span>';
            } else {
                html += '<span class="pager_btn" style="opacity: 0.5; cursor: not-allowed;">&gt;</span>';
            }
            
            // 跳转输入框
            html += '<span>前往</span>';
            html += '<span class="pager_input"><input type="text" value="' + pageNo + '" onkeypress="handlePageJump(event, ' + pageTotal + ')"/></span>';
            html += '<span>页</span>';
            
            pager.innerHTML = html;
        }
        
        /**
         * 全局暴露的页面跳转函数
         * @param {number} page - 目标页码
         */
        function goToPage(page) {
            var totalPages = PaginationConfig.totalPages;
            
            // 页码有效性检查
            if (page < 1 || page > totalPages) {
                console.warn('页码超出范围: ' + page + ', 有效范围: 1-' + totalPages);
                return;
            }
            
            // 更新演示界面（仅在演示页面中）
            var currentPageInput = document.getElementById('currentPage');
            if (currentPageInput) {
                currentPageInput.value = page;
            }
            
            // 重新渲染分页组件
            renderPagination(page, totalPages, PaginationConfig.containerId);
            
            // 触发自定义事件，供外部监听
            var event = new CustomEvent('pageChange', {
                detail: {
                    currentPage: page,
                    totalPages: totalPages
                }
            });
            document.dispatchEvent(event);
            
            console.log('跳转到第' + page + '页');
        }
        
        /**
         * 全局暴露的输入框跳转处理函数
         * @param {Event} event - 键盘事件
         * @param {number} totalPages - 总页数
         */
        function handlePageJump(event, totalPages) {
            if (event.key === 'Enter') {
                var page = parseInt(event.target.value);
                
                if (isNaN(page) || page < 1 || page > totalPages) {
                    // 恢复当前页码
                    event.target.value = PaginationConfig.currentPage;
                    alert('请输入有效的页码（1-' + totalPages + '）');
                    return;
                }
                
                goToPage(page);
            }
        }
        
        /**
         * 获取当前页码
         * @returns {number} 当前页码
         */
        function getCurrentPageNo() {
            return PaginationConfig.currentPage;
        }
        
        /**
         * 获取总页数
         * @returns {number} 总页数
         */
        function getTotalPages() {
            return PaginationConfig.totalPages;
        }
        
        /**
         * 设置分页配置
         * @param {Object} config - 配置对象
         * @param {number} config.currentPage - 当前页码
         * @param {number} config.totalPages - 总页数
         * @param {string} config.containerId - 容器ID
         */
        function setPaginationConfig(config) {
            if (config.currentPage) PaginationConfig.currentPage = config.currentPage;
            if (config.totalPages) PaginationConfig.totalPages = config.totalPages;
            if (config.containerId) PaginationConfig.containerId = config.containerId;
        }
        
        // ========== 以下为演示页面专用代码 ==========
        
        // 更新演示
        function updateDemo() {
            var currentPage = parseInt(document.getElementById('currentPage').value);
            var totalPages = parseInt(document.getElementById('totalPages').value);
            
            if (currentPage > totalPages) {
                currentPage = totalPages;
                document.getElementById('currentPage').value = currentPage;
            }
            
            renderPagination(currentPage, totalPages);
        }
        
        // 监听页面变化事件（演示用）
        document.addEventListener('pageChange', function(event) {
            console.log('页面变化事件:', event.detail);
        });
        
        // 页面加载完成后初始化演示
        document.addEventListener('DOMContentLoaded', function() {
            renderPagination(1, 10);
        });
        
        // 暴露到全局作用域（供外部调用）
        window.PaginationAPI = {
            renderPagination: renderPagination,
            goToPage: goToPage,
            handlePageJump: handlePageJump,
            getCurrentPageNo: getCurrentPageNo,
            getTotalPages: getTotalPages,
            setPaginationConfig: setPaginationConfig
        };
    </script>
</body>
</html>